<template>
  <div>
    {{ nameObj.name }}-------{{ $filters.format("我是渣渣") }}
    <p>
      <font color="red">{{ message }} {{ count }}</font>
    </p>
  </div>
  <div>
    <!-- 点击后视图层会改变 -->
    <el-button type="primary" @click="change1">change1</el-button>
    <!-- 点击后视图层不会改变，但是下面的值会改变 -->
    <el-button type="primary" @click="change2">change2</el-button>
  </div>
<div>
  <input v-model="modelValue" />
  {{ visible }} {{ modelValue }} {{ msg }}
</div>
</template>

<script setup lang='ts'>
defineOptions({
name: 'HelloWorld',
inheritAttrs:false // 防止透传 非 prop 属性不透传 
})
// const { msg, visible } = definePropsRefs<{
//   foo: string
//   bar: number
// }>()
// console.log(msg.value,'1111111');

const visible = defineModel('visible',{
  type:Number,
  default:0
});
// 获取当前组件实例
const instance = getCurrentInstance();
// 获取当前作用域
const instance1 = getCurrentInstance();

// 获取当前组件的上下文
const { ctx } = getCurrentInstance(); // 方式一，开发环境下使用
const { proxy } = getCurrentInstance(); // 方式二，开发和生产环境下使用
// console.log(instance);


const [modelValue,modelModifiers] = defineModel('modelValue',{
  set(val){
    if (modelModifiers.uppercase) {
      return val?.toUpperCase();
    }
  }
});
const msg=defineModel('msg')
let message = shallowReactive({
  test: "我是 yuanke",
  nav: {
    bar: {
      name: "我是 keyuan",
    },
  },
});
// 使用 withDefaults 来为 props 设置默认值
const props = withDefaults(
  defineProps<{
    messag: string;
    count: number;
    modelValue: number;
  }>(),
  {
    messag: "Hello, Vue 3!",
    count: 0,
    modelValue: 0,
  }
);
const emit = defineEmits(["update:modelValue",'update:visible']);
let info = reactive({
  name: "Tony",
  greet: "Hello",
});
// 复制 info 里的 greet 属性
// let rGreet = toRef(info.greet);
let rGreet = toRefs(info); // 复制info 里的 所有属性
// console.log(rGreet.value);

const nameObj = reactive({
  name: 1,
  englishName: "lee",
});
// 监听多个 reactive 数据时，注意使用数组；回调函数也使用数组，且一个数组装现值，一个数组装旧值
// watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [preName, preEng]) => {
//   console.log(curName, preName, '----', curEng, preEng)
// },{
//   immediate: true
// })
const change1 = () => {
  visible.value++
  modelValue.value++
  msg.value++
  message.test = "我被改啦";
  // emit("update:modelValue", nameObj.name);
  // emit("update:visible", info.name);
};

const change2 = () => {
  nameObj.name++;
  nameObj.englishName = "lee";
  message.nav.bar.name = "俺被改啦";
  // rGreet.value = '111'
  // console.log(message)
};
defineExpose({
  change2,
  rGreet,
});
</script>